function appendingItems(items) {
    let selector = ".content";
    $(selector).empty();
    for (let i = 0; i < items.length; i++) {
        var a = "<a href=\"" + "/items/" + items[i].id + "\"><div class=\"media\">\n" +
            "                    <div class=\"media-left\">\n" +
            // "                        <a href=\"" + "/items/"+items[i].id + "\">\n" +
            "                            <img class=\"media-object\" src=\"" + items[i].imgUrl + "\" alt=\"...\">\n" +
            // "                        </a>\n" +
            "                    </div>\n" +
            "                    <div class=\"media-body\">\n" +
            "                        <h4 class=\"media-heading\">\n" +
            "                            <span>" + items[i].hostelName + "</span>\n" +
            "                            <span class=\"pull-right glyphicon glyphicon-record tab\">" + items[i].location + "</span>\n" +
            "                            <span class=\"pull-right glyphicon glyphicon-eye-open tab\">" + items[i].readCount + "</span>\n" +
            "                        </h4>\n" +
            "                        <p>" + items[i].introduction + "</p>\n" +
            "                    </div>\n" +
            "                </div>" +
            "</a>";
        $(selector).append(a);
    }
}

function appendingPagination(pageRule) {
    let pre = "";
    if (pageRule.currentPage !== 1) {
        let prePage = pageRule.currentPage - 1;
        pre = "<li>\n" +
            "        <a href=\"" + "javascript:getItems(" + prePage + ")\" aria-label=\"Previous\">\n" +
            "             <span aria-hidden=\"true\">&laquo;</span>\n" +
            "        </a>\n" +
            "  </li>";
    }
    let next = "";
    if (pageRule.currentPage !== pageRule.lastPage) {
        let nextPage = pageRule.currentPage + 1;
        next = "<li>\n" +
            "         <a href=\"" + "javascript:getItems(" + nextPage + ")" + "\" aria-label=\"Next\">\n" +
            "             <span aria-hidden=\"true\">&raquo;</span>\n" +
            "         </a>\n" +
            "  </li>";
    }
    let selector = ".pagination";
    $(selector).empty();
    $(selector).append(pre);
    let bonus = "";
    for (let i = 0; i < pageRule.pages.length; i++) {
        if (pageRule.currentPage === pageRule.pages[i]) {
            bonus = "active";
        } else {
            bonus = "";
        }
        var a = "<li class='" + bonus + "'><a href=\"javascript:getItems(" + pageRule.pages[i] + ")" + "\">" + pageRule.pages[i] + "</a></li>";
        $(selector).append(a);
    }
    $(selector).append(next);
}

function getItems(page) {
    $.ajax({
        url: "/items/" + page,
        type: "POST",
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            console.log(response);
            appendingItems(response.data[0]);
            appendingPagination(response.data[1]);
        },
        error: function (error) {
            console.log(error);
        }
    });
}